</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_RATING%%" --><!--DXMETADATA end --> <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end--> <div id="ProjectTitle"><!--DXMETADATA start type="ProjectTitle" -->WPF and Silverlight Edition Basic Library <!--DXMETADATA end--></div> <div id="PageTitle"><div id="PageTitleText"><!--DXMETADATA start type="ItemTitle" -->Step 3 of 3: Customizing the Application<!--DXMETADATA end--></div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label> <label id="ExpandAllLabel" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label> </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end --> </div> <!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="BreadcrumbsContainer"><table><tr><td> <a href="WPF and Silverlight Edition Basic Library.html">WPF and Silverlight Edition Basic Library</a> > <a href="HyperPanel .html">HyperPanel </a> > HyperPanel Quick Start > Step 3 of 3: Customizing the Application</td></tr></table></div><!--DXMETADATA end --> <div id="BodyContent"> <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>In the previous steps you created a new WPF or Silverlight project and added a <a href="C1.WPF.4~C1.WPF.C1HyperPanel.html">C1HyperPanel</a> panel and several <strong>ContentControl</strong>s to the application. In this step you'll continue by setting properties to customize those controls.</p> <p>Complete the following steps:</p> <ol> <li>In XAML view, set the <strong>C1HyperPanel</strong> control's orientation by adding <strong>Orientation="Horizontal"</strong> to the <strong><c1:C1HyperPanel></strong> tag so that it appears similar to the following:</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1HyperPanel x:Name=<span style="COLOR: #800000">"c1hp1"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span> Orientation=<span style="COLOR: #800000">"Horizontal"</span>> </pre> </td> </tr> </tbody> </table> </div> </blockquote> <div style="COUNTER-RESET: item 1; margin-left: 2em" start="2"> The <a href="C1.WPF.4~C1.WPF.C1HyperPanel~Orientation.html">Orientation</a> property determines if items in the panel are displayed horizontally or vertically. By default <strong>Orientation</strong> is set to <strong>Vertical</strong> and the panel displays content vertically; setting <strong>Orientation</strong> property to <strong>Horizontal</strong> will display content horizontally. </div> <ol style="COUNTER-RESET: item 1" start="2"> <li>Set the <a href="C1.WPF.4~C1.WPF.C1HyperPanel.html">C1HyperPanel</a> control's distribution by adding <strong>Distribution="0.2"</strong> to the <strong><c1:C1HyperPanel></strong> tag so that it appears similar to the following:</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1HyperPanel x:Name=<span style="COLOR: #800000">"c1hp1"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span> Orientation=<span style="COLOR: #800000">"Horizontal"</span> Distribution=<span style="COLOR: #800000">"0.2"</span>> </pre> </td> </tr> </tbody> </table> </div> <p>The <a href="C1.WPF.4~C1.WPF.C1HyperPanel~Distribution.html">Distribution</a> property consists of a number between .1 and 1.0 and controls how elements are zoomed near the center of the panel. The smaller the value, the more visible the zoom effect. By default, the property is set to "0.5". Setting <strong>Distribution</strong> to ".02" will cause elements in the center to appear even more zoomed in then elements at the edge of the panel.</p> </blockquote> <ol style="COUNTER-RESET: item 2" start="3"> <li>Set the <strong>C1HyperPanel</strong> control's scale by adding <strong>MinElementScale="0.5"</strong> to the <strong><c1:C1HyperPanel></strong> tag so that it appears similar to the following:</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1HyperPanel x:Name=<span style="COLOR: #800000">"c1hp1"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span> Orientation=<span style="COLOR: #800000">"Horizontal"</span> Distribution=<span style="COLOR: #800000">"0.2"</span> MinElementScale=<span style="COLOR: #800000">"0.5"</span>> </pre> </td> </tr> </tbody> </table> </div> <p>The <a href="C1.WPF.4~C1.WPF.C1HyperPanel~MinElementScale.html">MinElementScale</a> property consists of a number between 0 and 1.0 and determines how small elements near the edge of the panel will appear when compared to elements near the center. By default, the property is set to "0". Setting <strong>MinElementScale</strong> will ensure that elements near the edge of the panel will appear half their original size at the smallest.</p> </blockquote> <ol style="COUNTER-RESET: item 3" start="4"> <li>Set the <strong>C1HyperPanel</strong> control's center by adding <strong>Center="0.1"</strong> to the <strong><c1:C1HyperPanel></strong> tag so that it appears similar to the following:</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1HyperPanel x:Name=<span style="COLOR: #800000">"c1hp1"</span> Height=<span style="COLOR: #800000">"Auto"</span> Width=<span style="COLOR: #800000">"Auto"</span> Orientation=<span style="COLOR: #800000">"Horizontal"</span> Distribution=<span style="COLOR: #800000">"0.2"</span> MinElementScale=<span style="COLOR: #800000">"0.5"</span> Center=<span style="COLOR: #800000">"0.1"</span>> </pre> </td> </tr> </tbody> </table> </div> <p>The <a href="C1.WPF.4~C1.WPF.C1HyperPanel~Center.html">Center</a> property consists of a number between 0 and 1.0 and sets where the center, or the most zoomed in element, of the panel is when the application is initially run. By default, the property is set to "0.5" and the center is in the middle. Setting <strong>Center</strong> will move the initially zoomed element to the left side of the control. This value is updated automatically as the mouse moves over the panel at run time.</p> </blockquote> <ol style="COUNTER-RESET: item 4" start="5"> <li>Add the following markup just after the <strong><C1HyperPanel></strong> tag and before the content elements:</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <div class="FilteredContentCS" data-title="CS" data-itemid="CS"> <table class="SyntaxTable"> <tbody> <tr> <th>XAML</th> <th> <div class="CopyCodeWrapper"> <span class="CopyCode">Copy Code</span> </div> </th> </tr> <tr> <td colspan="2"> <pre> <c1:C1HyperPanel.Background> <LinearGradientBrush EndPoint=<span style="COLOR: #800000">"0.5,1"</span> StartPoint=<span style="COLOR: #800000">"0.5,0"</span>> <GradientStop Color=<span style="COLOR: #800000">"#FF000000"</span> Offset=<span style="COLOR: #800000">"0"</span>/> <GradientStop Color=<span style="COLOR: #800000">"#FFFF00DF"</span> Offset=<span style="COLOR: #800000">"1"</span>/> </LinearGradientBrush> </c1:C1HyperPanel.Background> </pre> </td> </tr> </tbody> </table> </div> <p>This markup will add a gradient background to the <strong>C1HyperPanel</strong>.</p> </blockquote> <ol style="COUNTER-RESET: item 5" start="6"> <li>From the <strong>Debug</strong> menu, select <strong>Start Debugging</strong> to view how your application will appear at run time.</li> </ol> <blockquote style="MARGIN-RIGHT: 0px" dir="ltr"> <p>The application will initially appear similar to the following:</p> <p><img border="0" alt="" src="images/HyperPanel/QSStep31.png"></p> </blockquote> <ol style="COUNTER-RESET: item 6" start="7"> <li>Move your mouse in the panel and notice that the <strong>Center</strong> of the content changes:<img border="0" alt="" src="images/HyperPanel/QSStep32.png"></li> </ol> <p> </p><!--DXMETADATA end--> <a name="seealsobookmark"></a> <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end--> </div> <div id="FooterContent"> <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p> </p><p> </p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p> </p><p> </p><hr style="height: 1px"><p>Copyright © <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved.</p><!--DXMETADATA end --> <!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><a href="http://our.componentone.com/groups/" target="_blank">Product Support Forum</a> | <a href="http://feedback.componentone.com/forums/272000-wpf-and-silverlight-documentation" target="_blank">Documentation Feedback</a> <!--DXMETADATA end--> </div> </body> </html>